<!-- Morris charts section start -->
<section id="morris-charts">
    <!-- Line Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Line Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <ul class="list-inline text-right pr-2">
                            <li>
                                <h6><i class="ft-circle purple"></i> iPhone</h6>
                            </li>
                            <li>
                                <h6><i class="ft-circle cyan"></i> Samsung</h6>
                            </li>
                            <li>
                                <h6><i class="ft-circle amber"></i> HTC</h6>
                            </li>
                        </ul>
                        <div id="line-chart" class="height-400"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Smooth Line Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Smooth Line Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <ul class="list-inline text-center">
                            <li>
                                <h6><i class="ft-circle purple"></i> iPhone</h6>
                            </li>
                            <li>
                                <h6><i class="ft-circle cyan"></i> Samsung</h6>
                            </li>
                            <li>
                                <h6><i class="ft-circle amber"></i> HTC</h6>
                            </li>
                        </ul>
                        <div id="smooth-line-chart" class="height-400"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Area Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Area Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <ul class="list-inline text-right pr-2">
                            <li>
                                <h6><i class="ft-circle grey lighten-1"></i> iPhone</h6>
                            </li>
                            <li>
                                <h6><i class="ft-circle pink"></i> Samsung</h6>
                            </li>
                        </ul>
                        <div id="area-chart" class="height-400"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Smooth Area Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Smooth Area Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <ul class="list-inline text-center">
                            <li>
                                <h6><i class="ft-circle grey lighten-1"></i> iPhone</h6>
                            </li>
                            <li>
                                <h6><i class="ft-circle pink"></i> Samsung</h6>
                            </li>
                        </ul>
                        <div id="smooth-area-chart" class="height-400"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bar Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Bar Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <ul class="list-inline text-center">
                            <li>
                                <h6><i class="ft-circle purple"></i> Data 1</h6>
                            </li>
                            <li>
                                <h6><i class="ft-circle pink"></i> Data 2</h6>
                            </li>
                        </ul>
                        <div id="bar-chart" class="height-400"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Donut Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Donut Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div id="donut-chart" class="height-400"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Morris charts section end -->